<!-- 功能：创建NASLUN弹窗 | 作者：menghao.yan | 邮箱：yxs2615@163.com | 时间：2023年08月16日 22:30:38 -->
<template>
  <!-- 弹出框 -->
  <a-modal v-model:open="visible" title="创建NASLUN" width="900px" class="y-modal" @cancel="onCancel">
    <a-steps :current="current" :items="items"></a-steps>

    <a-form :label-col="{ span: 6 }" :wrapper-col="{span: 14}">
      <template v-if="current==0">
        <a-form-item label="选择存储池" v-bind="validateInfos.cunChuChi">
          <a-select v-model:value="modelRef.cunChuChi" placeholder="请选择存储池">
            <a-select-option value="cunChuChi-1">存储池-1</a-select-option>
            <a-select-option value="cunChuChi-2">存储池-2</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="未分配空间">
          9.53 GiB
        </a-form-item>
        <a-form-item label="创建存储池">
          <a-checkbox v-model:checked="modelRef.chuangJianCunChuChi"></a-checkbox>
        </a-form-item>

      </template>

      <template v-if="current==1">
        <a-form-item label="LUNID">
          NASLun10
        </a-form-item>
        <a-form-item label="LUN名称" v-bind="validateInfos.LunName">
          <a-input v-model:value="modelRef.LunName" placeholder="请输LUN名称"></a-input>
        </a-form-item>
        <a-form-item label="当前LUN空间为">
          9.53 GiB
        </a-form-item>
        <a-form-item label="创建LUN容量" v-bind="validateInfos.lunRongLiang">
          <a-row :gutter="12">
            <a-col flex="auto">
              <a-input v-model:value="modelRef.lunRongLiang" placeholder="请输入创建LUN容量" />
            </a-col>
            <a-col flex="20px">
              <a-select v-model:value="modelRef.lunRongLiangDanWei" placeholder="请选择创建LUN容量单位">
                <a-select-option value="MiB">MiB</a-select-option>
                <a-select-option value="GiB">GiB</a-select-option>
                <a-select-option value="MiB">MiB</a-select-option>
              </a-select>
            </a-col>
          </a-row>
        </a-form-item>
        <a-form-item label="是否划分条带">
          <a-checkbox v-model:checked="modelRef.shiFouHuaFenTiaoDai"></a-checkbox>
        </a-form-item>

        <template v-if="modelRef.shiFouHuaFenTiaoDai">
          <a-form-item label="条带数">
            <a-select v-model:value="modelRef.tiaoDaiShu" placeholder="请选择条带数">
              <a-select-option value="1">1</a-select-option>
              <a-select-option value="2">2</a-select-option>
              <a-select-option value="3">3</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="条带大小(kb)">
            <a-select v-model:value="modelRef.tiaoDaiDaXiao" placeholder="请选择条带大小">
              <a-select-option value="4">4</a-select-option>
              <a-select-option value="8">8</a-select-option>
              <a-select-option value="16">16</a-select-option>
              <a-select-option value="32">32</a-select-option>
              <a-select-option value="64">64</a-select-option>
              <a-select-option value="128">128</a-select-option>
              <a-select-option value="256">256</a-select-option>
              <a-select-option value="512">512</a-select-option>
            </a-select>
          </a-form-item>
        </template>
      </template>

      <template v-if="current==2">
        <a-form-item label="要映射的LUN">
          NASLun10
        </a-form-item>
        <a-form-item label="映射位置(挂载点)">
          <a-input v-model:value="modelRef.yingSheWeiZhi" placeholder="请输入映射位置" />
        </a-form-item>
      </template>

      <template v-if="current==3">
        <a-card>
          <template #title><span class="y-chuangJianNasLunModal-title">创建/选择 存储池</span></template>
          <a-form-item label="存储池">
            {{modelRef.cunChuChi}}
          </a-form-item>
          <a-form-item label="当前LUN空间为">
            9.53 GiB
          </a-form-item>
        </a-card>
        <a-card>
          <template #title><span class="y-chuangJianNasLunModal-title">创建LUN</span></template>
          <a-form-item label="LUNID">
            NASLUN10
          </a-form-item>
          <a-form-item label="容量">
            9.53 GiB
          </a-form-item>
          <a-form-item label="LUN名称">
            {{modelRef.lunName}}
          </a-form-item>
          <a-form-item label="条带数">
            {{modelRef.tiaoDaiShu}}
          </a-form-item>
          <a-form-item label="条带大小(kb)">
            {{modelRef.tiaoDaiDaXiao}}
          </a-form-item>
        </a-card>
        <a-card>
          <template #title><span class="y-chuangJianNasLunModal-title">创建映射</span></template>
          <a-form-item label="挂载">
            {{modelRef.yingSheWeiZhi}}
          </a-form-item>
        </a-card>
        <a-card>
          <template #title><span class="y-chuangJianNasLunModal-title">其他</span></template>
          <a-form-item label="LUN批量复制">
            <a-checkbox v-model:value="modelRef.lunPiLiangFuZhi" />
          </a-form-item>
        </a-card>
      </template>
    </a-form>

    <template #footer>
      <a-space>
        <a-button class="y-btn" @click="prevStep" v-if="current>0">上一步</a-button>
        <a-button class="y-btn" @click="nextStep" v-if="current<items.length-1">下一步</a-button>
        <a-button class="y-btn" @click="onSubmit" v-if="current==items.length-1">完成</a-button>
        <a-button class="y-btn" @click="onCancel">退出</a-button>
      </a-space>
    </template>

  </a-modal>
</template>

<script setup>
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const { visible } = toRefs(props)
// 定义组件的事件
const emits = defineEmits(['update:visible'])

const current = ref(0)
const steps = [
  {
    title: '1.创建/选择 存储池',
    status: 'process'
  },
  {
    title: '2.创建LUN',
    status: 'wait'
  },
  {
    title: '3.创建映射',
    status: 'wait'
  },
  {
    title: '4.确认信息',
    status: 'wait'
  }
]

const items = steps.map(item => ({
  key: item.title,
  title: item.title
}))

import { Form } from 'ant-design-vue'

const useForm = Form.useForm

const modelRef = reactive({
  cunChuChi: 'cunChuChi-1',
  jingJianChiDaXiao: '32',
  chuangJianCunChuChi: false,
  LunName: '',
  shiFouHuaFenTiaoDai: false,
  lunRongLiang: '9.53',
  lunRongLiangDanWei: 'GiB',
  tiaoDaiShu: '1',
  tiaoDaiDaXiao: '4',
  yingSheWeiZhi: 'naslun10',
  lunPiLiangFuZhi: false
})

const rulesRef = reactive({
  cunChuChi: [
    {
      required: true,
      message: '请选择存储池'
    }
  ],
  LunName: [
    {
      required: true,
      message: '请输入LUN名称'
    }
  ],
  lunRongLiang: [
    {
      required: true,
      message: '请输入LUN容量'
    }
  ],
  yingSheWeiZhi: [
    {
      required: true,
      message: '请输入映射位置'
    }
  ]
})

const { resetFields, validate, validateInfos, mergeValidateInfo } = useForm(modelRef, rulesRef)
const onSubmit = () => {
  validate()
    .then(() => {
      console.log('创建NASLUN>>', toRaw(modelRef))
      onCancel()
    })
    .catch(err => {
      console.log('error', err)
    })
}

const onCancel = () => {
  // 触发自定义事件来通知父组件关闭弹窗
  emits('update:visible', false)
}

const nextStep = () => {
  current.value++
}

const prevStep = () => {
  current.value--
}
</script>

<style scoped>
.ant-steps {
  margin-bottom: 20px;
}
.ant-row {
  margin-bottom: 10px;
}
.y-chuangJianNasLunModal-title {
  color: #333;
  font-weight: bold;
  font-size: 16px;
}
.ant-card {
  border: none;
}
</style>